<template>

    <div>

        <Codemirror v-model="code" 
        :tab-size="2"
        :extensions="extensions"
        :style="{ height: '400px' }"
        :autofocus="true"
        :indent-with-tab="true"
        ></Codemirror>

        <button @click="submit">保存</button>
    </div>


</template>

<!-- https://github.com/surmon-china/vue-codemirror -->
<script setup lang="ts">
import {  ref,watch  } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'

const extensions = [javascript(), oneDark]
//定义emit
const emit = defineEmits([ 'submitCode'])
// 组件入参
let a = defineProps<{
  codeProp: string
}>()
//代码编辑器绑定内容
const code = ref("console.log('hi! liteflow')")

//监听组件入参，交给绑定属性
watch(()=>a.codeProp,(newCode:string)=>{
    code.value = newCode
})



const submit=()=>{
    alert('保存成功')
    emit('submitCode',code.value)
}

</script>

<style scoped>

</style>